<template>
  <div>
    <div class="room-box">
      <div class="room-box-logo">
        <div class="logo-title">我的聊天室</div>
        <div style="flex: 1; width: 100%">
          <div style="width: 100%; height: 100%">
            <lottie-animation
              :animationData="animationLogo"
              :loop="true"
              :autoplay="true"
            ></lottie-animation>
          </div>
        </div>
        <van-form :model="loginForm" ref="addRef">
          <van-cell-group inset>
            <van-field
              v-model.trim="loginForm.userName"
              name="用户名"
              label="用户名"
              placeholder="请输入用户名"
              :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field
              v-model.trim="loginForm.passWord"
              type="password"
              name="密码"
              label="密码"
              placeholder="请输入密码"
              :rules="[{ required: true, message: '请填写密码' }]"
            />
          </van-cell-group>
        </van-form>
      </div>
      <div class="room-box-btns">
        <van-row>
          <van-cell>
            <van-button round type="primary" size="large" @click="handleLogin">
              <!-- <font-awesome-icon :icon="['fa', 'plus']" /> -->
              &nbsp;登 录</van-button
            >
          </van-cell>
        </van-row>
      </div>
    </div>
  </div>
</template>  
<script lang="ts">
import {
  defineComponent,
  reactive,
  toRefs,
  getCurrentInstance,
  onMounted,
} from "vue";
import { ElMessage } from "element-plus";
import { useSocket } from "@/utils/socket/useSocket";
import MySender from "@/utils/socket/MySender";
import MsgCommand from "@/utils/socket/enums/MsgCommand";
import animationLogo from "@/animation/logo.json";
import { login } from "@/api/user";
import { useRouter } from "vue-router";

export default defineComponent({
  setup(props: any, { emit }: any) {
    const state = reactive({
      loginForm: {
        userName: "",
        passWord: "",
      },
      animationLogo: animationLogo,
      loginLoading: false,
    });
    const { proxy } = getCurrentInstance() as any;
    const { initSocketFun, chatStatus } = useSocket();
    const router = useRouter();
    onMounted(() => {});

    const handleLogin = () => {
      proxy.$refs.addRef.validate().then(async (valid: any) => {
        state.loginLoading = true;
        let res = await login(state.loginForm);
        state.loginLoading = false;
        if (res.status == 0) {
          loginSuccess(res.data);
        } else {
          ElMessage.error(res.message);
        }
      });
    };

    const loginSuccess = (data: any) => {
      const { initSocketFun, chatStatus } = useSocket();
      initSocketFun();
      const toLogin = (data) => {
        MySender.getInstance().sendMsg(MsgCommand.USER_LOGIN, {
          userId: data.userId,
          userName: data.userName,
          avatar: data.avatar,
        });
      };
      localStorage.setItem("token", data.tokenStr);
      setTimeout(() => {
        toLogin(data);
      }, 1000);
    };

    return {
      ...toRefs(state),
      ...toRefs(chatStatus),
      open,
      handleLogin,
    };
  },
});
</script>
<style lang="less" scoped>
.room-box {
  width: 100%;
  height: calc(100vh);
  padding: 10px 16px;
  display: flex;
  flex-direction: column;

  &-btns {
    height: 20%;
  }

  &-logo {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    position: relative;
    overflow: hidden;
    padding-bottom: 20px;
    .logo-title {
      text-align: center;
      width: 100%;
      color: #1989f4;
      line-height: 60px;
      height: 60px;
    }
  }
}
.chat-set {
  display: flex;
  flex-direction: column;
  justify-content: center;
  &-head {
    text-align: center;
  }
}

.person-info-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  span {
    font-size: 14px;
    color: #666666;
    line-height: 20px;
  }
}
</style>
      